<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">解决方案推荐</text>
        <text class="page-subtitle">基于AI分析为您推荐最适合的解决方案</text>
      </view>
    </view>

    <!-- 问题摘要 -->
    <view class="problem-summary" v-if="problemSummary">
      <view class="summary-header">
        <text class="summary-title">问题摘要</text>
        <view class="risk-badge" :class="problemSummary.riskLevel">
          {{ problemSummary.riskLevelText }}
        </view>
      </view>
      <view class="summary-content">
        <text class="summary-text">{{ problemSummary.description }}</text>
      </view>
    </view>

    <!-- 方案对比功能 -->
    <view class="comparison-section" v-if="solutions.length > 1">
      <view class="comparison-header">
        <text class="comparison-title">方案对比</text>
        <button class="btn btn-outline btn-small" @click="toggleComparison">
          {{ showComparison ? '取消对比' : '开始对比' }}
        </button>
      </view>
      
      <view class="comparison-list" v-if="showComparison">
        <view 
          class="comparison-item" 
          v-for="(solution, index) in solutions" 
          :key="index"
          @click="toggleSolutionComparison(index)"
        >
          <checkbox 
            :checked="comparisonSolutions.includes(index)"
            :disabled="comparisonSolutions.length >= 2 && !comparisonSolutions.includes(index)"
          />
          <text class="comparison-text">{{ solution.name }}</text>
        </view>
      </view>
    </view>

    <!-- 解决方案列表 -->
    <view class="solutions-section">
      <view class="section-title">推荐方案</view>
      <view class="solutions-list">
        <view 
          class="solution-card" 
          v-for="(solution, index) in solutions" 
          :key="index"
          :class="{ 
            'selected': selectedSolution === index,
            'comparing': showComparison && comparisonSolutions.includes(index)
          }"
        >
          <!-- 方案头部 -->
          <view class="solution-header">
            <view class="solution-info">
              <text class="solution-name">{{ solution.name }}</text>
              <view class="solution-rating">
                <text class="rating-text">推荐度 {{ solution.rating }}%</text>
                <view class="rating-bar">
                  <view class="rating-fill" :style="{ width: solution.rating + '%' }"></view>
                </view>
              </view>
            </view>
            <view class="solution-badge" :class="solution.type">
              {{ solution.typeText }}
            </view>
          </view>

          <!-- 方案描述 -->
          <view class="solution-description">
            <text class="desc-text">{{ solution.description }}</text>
          </view>

          <!-- 关键信息 -->
          <view class="solution-meta">
            <view class="meta-item">
              <text class="meta-icon">⏱️</text>
              <text class="meta-label">预计耗时</text>
              <text class="meta-value">{{ solution.duration }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">💰</text>
              <text class="meta-label">预计费用</text>
              <text class="meta-value">{{ solution.cost }}</text>
            </view>
            <view class="meta-item">
              <text class="meta-icon">📈</text>
              <text class="meta-label">成功率</text>
              <text class="meta-value">{{ solution.successRate }}%</text>
            </view>
          </view>

          <!-- 优势特点 -->
          <view class="solution-advantages">
            <text class="advantages-title">方案优势</text>
            <view class="advantages-list">
              <view 
                class="advantage-item" 
                v-for="(advantage, advIndex) in solution.advantages" 
                :key="advIndex"
              >
                <text class="advantage-icon">✓</text>
                <text class="advantage-text">{{ advantage }}</text>
              </view>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="solution-actions">
            <button class="btn btn-outline" @click="viewDetails(solution)">
              查看详情
            </button>
            <button 
              class="btn btn-accent" 
              @click="selectSolution(solution, index)"
            >
              选择此方案
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 对比详情弹窗 -->
    <view class="comparison-modal" v-if="showComparisonModal" @click="closeComparisonModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">方案对比详情</text>
          <button class="modal-close" @click="closeComparisonModal">✕</button>
        </view>
        <view class="comparison-table">
          <view class="comparison-row header">
            <text class="comparison-cell">对比项目</text>
            <text class="comparison-cell">{{ solutions[comparisonSolutions[0]]?.name }}</text>
            <text class="comparison-cell">{{ solutions[comparisonSolutions[1]]?.name }}</text>
          </view>
          <view class="comparison-row" v-for="(item, index) in comparisonItems" :key="index">
            <text class="comparison-cell">{{ item.label }}</text>
            <text class="comparison-cell">{{ item.value1 }}</text>
            <text class="comparison-cell">{{ item.value2 }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部固定操作栏 -->
    <view class="bottom-actions" v-if="selectedSolution !== null">
      <view class="selected-info">
        <text class="selected-text">已选择：{{ solutions[selectedSolution]?.name }}</text>
        <text class="selected-cost">{{ solutions[selectedSolution]?.cost }}</text>
      </view>
      <button class="btn btn-accent btn-large" @click="proceedToProcess">
        开始办理
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SolutionRecommend',
  data() {
    return {
      problemSummary: null,
      solutions: [],
      selectedSolution: null,
      showComparison: false,
      comparisonSolutions: [],
      showComparisonModal: false,
      comparisonItems: []
    }
  },
  onLoad(options) {
    // 获取从智能评估页面传入的数据
    if (options.evaluation) {
      const evaluation = JSON.parse(decodeURIComponent(options.evaluation))
      this.loadEvaluationData(evaluation)
    } else if (options.solution) {
      const solution = JSON.parse(decodeURIComponent(options.solution))
      this.loadSingleSolution(solution)
    } else {
      this.loadDefaultSolutions()
    }
  },
  methods: {
    loadEvaluationData(evaluation) {
      this.problemSummary = {
        description: evaluation.disputeType + ' - ' + evaluation.keyPoints,
        riskLevel: evaluation.riskLevel,
        riskLevelText: evaluation.riskLevelText
      }
      this.solutions = evaluation.solutions.map((sol, index) => ({
        ...sol,
        type: this.getSolutionType(sol.name),
        typeText: this.getSolutionTypeText(sol.name),
        successRate: this.calculateSuccessRate(sol.rating),
        advantages: this.getSolutionAdvantages(sol.name)
      }))
    },
    
    loadSingleSolution(solution) {
      this.solutions = [{
        ...solution,
        type: this.getSolutionType(solution.name),
        typeText: this.getSolutionTypeText(solution.name),
        successRate: this.calculateSuccessRate(solution.rating),
        advantages: this.getSolutionAdvantages(solution.name)
      }]
    },
    
    loadDefaultSolutions() {
      this.solutions = [
        {
          name: '协商调解',
          description: '与对方进行友好协商，通过调解方式解决纠纷，快速高效且成本较低',
          rating: 85,
          duration: '3-7天',
          cost: '免费',
          type: 'fast',
          typeText: '快速',
          successRate: 70,
          advantages: ['成本低', '时间短', '关系友好', '保密性好']
        },
        {
          name: '公证确认',
          description: '通过公证处对相关事实、文件进行公证，具有较强的法律效力和证明力',
          rating: 88,
          duration: '5-15天',
          cost: '¥100-500',
          type: 'notary',
          typeText: '公证',
          successRate: 92,
          advantages: ['证据效力强', '程序简便', '国际认可', '预防纠纷']
        },
        {
          name: '劳动仲裁',
          description: '向劳动仲裁委员会申请仲裁，具有法律效力，程序相对简单',
          rating: 90,
          duration: '15-45天',
          cost: '¥10',
          type: 'standard',
          typeText: '标准',
          successRate: 85,
          advantages: ['法律效力强', '程序规范', '成本较低', '执行保障']
        },
        {
          name: '法院诉讼',
          description: '向法院提起诉讼，获得法院判决，具有最高法律效力',
          rating: 75,
          duration: '3-6个月',
          cost: '按标的额计算',
          type: 'formal',
          typeText: '正式',
          successRate: 90,
          advantages: ['法律效力最高', '强制执行', '权威性强', '全面保护']
        }
      ]
    },
    
    getSolutionType(name) {
      if (name.includes('协商')) return 'fast'
      if (name.includes('公证')) return 'notary'
      if (name.includes('仲裁')) return 'standard'
      if (name.includes('诉讼')) return 'formal'
      return 'standard'
    },
    
    getSolutionTypeText(name) {
      if (name.includes('协商')) return '快速'
      if (name.includes('公证')) return '公证'
      if (name.includes('仲裁')) return '标准'
      if (name.includes('诉讼')) return '正式'
      return '标准'
    },
    
    calculateSuccessRate(rating) {
      return Math.min(95, Math.max(60, rating + Math.floor(Math.random() * 10)))
    },
    
    getSolutionAdvantages(name) {
      const advantagesMap = {
        '协商调解': ['成本低', '时间短', '关系友好', '保密性好'],
        '公证确认': ['证据效力强', '程序简便', '国际认可', '预防纠纷'],
        '劳动仲裁': ['法律效力强', '程序规范', '成本较低', '执行保障'],
        '法院诉讼': ['法律效力最高', '强制执行', '权威性强', '全面保护']
      }
      return advantagesMap[name] || ['专业服务', '法律保障', '成功率高']
    },
    
    toggleComparison() {
      this.showComparison = !this.showComparison
      if (!this.showComparison) {
        this.comparisonSolutions = []
        this.showComparisonModal = false
      }
    },
    
    toggleSolutionComparison(index) {
      if (this.comparisonSolutions.includes(index)) {
        this.comparisonSolutions = this.comparisonSolutions.filter(i => i !== index)
      } else if (this.comparisonSolutions.length < 2) {
        this.comparisonSolutions.push(index)
        if (this.comparisonSolutions.length === 2) {
          this.showComparisonModal = true
          this.generateComparisonData()
        }
      }
    },
    
    generateComparisonData() {
      const sol1 = this.solutions[this.comparisonSolutions[0]]
      const sol2 = this.solutions[this.comparisonSolutions[1]]
      
      this.comparisonItems = [
        { label: '预计耗时', value1: sol1.duration, value2: sol2.duration },
        { label: '预计费用', value1: sol1.cost, value2: sol2.cost },
        { label: '成功率', value1: sol1.successRate + '%', value2: sol2.successRate + '%' },
        { label: '推荐度', value1: sol1.rating + '%', value2: sol2.rating + '%' },
        { label: '法律效力', value1: this.getLegalEffect(sol1.name), value2: this.getLegalEffect(sol2.name) },
        { label: '执行保障', value1: this.getExecutionGuarantee(sol1.name), value2: this.getExecutionGuarantee(sol2.name) }
      ]
    },
    
    getLegalEffect(name) {
      if (name.includes('协商')) return '无强制力'
      if (name.includes('公证')) return '证据效力强'
      if (name.includes('仲裁')) return '有强制力'
      if (name.includes('诉讼')) return '最高强制力'
      return '中等'
    },
    
    getExecutionGuarantee(name) {
      if (name.includes('协商')) return '依赖对方配合'
      if (name.includes('公证')) return '预防纠纷发生'
      if (name.includes('仲裁')) return '可申请强制执行'
      if (name.includes('诉讼')) return '法院强制执行'
      return '一般'
    },
    
    closeComparisonModal() {
      this.showComparisonModal = false
    },
    
    selectSolution(solution, index) {
      this.selectedSolution = index
      uni.showToast({
        title: `已选择${solution.name}`,
        icon: 'success'
      })
    },
    
    viewDetails(solution) {
      uni.showModal({
        title: solution.name,
        content: `详细说明：${solution.description}\n\n优势：${solution.advantages.join('、')}`,
        showCancel: false,
        confirmText: '知道了'
      })
    },
    
    proceedToProcess() {
      if (this.selectedSolution === null) {
        uni.showToast({
          title: '请先选择一个方案',
          icon: 'none'
        })
        return
      }
      
      const selectedSolution = this.solutions[this.selectedSolution]
      uni.navigateTo({
        url: '/pages/process-detail/index?solution=' + encodeURIComponent(JSON.stringify(selectedSolution))
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: var(--background-color);
  padding-bottom: 120rpx;
}

/* 页面头部 */
.page-header {
  background: var(--card-color);
  padding: 30rpx;
  border-bottom: 1rpx solid var(--border-color);
}

.header-content {
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-primary);
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: var(--text-secondary);
}

/* 问题摘要 */
.problem-summary {
  margin: 20rpx;
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.summary-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.risk-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.risk-badge.low {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.risk-badge.medium {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.risk-badge.high {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
}

.summary-content {
  background: var(--background-color);
  border-radius: 12rpx;
  padding: 20rpx;
}

.summary-text {
  font-size: 26rpx;
  color: var(--text-primary);
  line-height: 1.6;
}

/* 方案对比 */
.comparison-section {
  margin: 20rpx;
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 1rpx solid var(--border-color);
}

.comparison-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.comparison-title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.comparison-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 15rpx;
  background: var(--background-color);
  border-radius: 12rpx;
  border: 2rpx solid var(--border-color);
  transition: all 0.3s ease;
}

.comparison-item:active {
  border-color: var(--primary-color);
  background: rgba(10, 36, 99, 0.05);
}

.comparison-text {
  font-size: 24rpx;
  color: var(--text-primary);
}

/* 解决方案列表 */
.solutions-section {
  margin: 20rpx;
}

.solutions-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.solution-card {
  background: var(--card-color);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(10, 36, 99, 0.08);
  border: 2rpx solid var(--border-color);
  transition: all 0.3s ease;
}

.solution-card.selected {
  border-color: var(--accent-color);
  background: rgba(255, 107, 53, 0.05);
}

.solution-card.comparing {
  border-color: var(--primary-color);
  background: rgba(10, 36, 99, 0.05);
}

.solution-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.solution-info {
  flex: 1;
}

.solution-name {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-primary);
  display: block;
  margin-bottom: 10rpx;
}

.solution-rating {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.rating-text {
  font-size: 22rpx;
  color: var(--text-secondary);
}

.rating-bar {
  flex: 1;
  height: 8rpx;
  background: var(--border-color);
  border-radius: 4rpx;
  overflow: hidden;
}

.rating-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.solution-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-weight: 600;
}

.solution-badge.fast {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.solution-badge.notary {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.solution-badge.standard {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
}

.solution-badge.formal {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger-color);
}

.solution-description {
  margin-bottom: 25rpx;
}

.desc-text {
  font-size: 26rpx;
  color: var(--text-secondary);
  line-height: 1.6;
}

.solution-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25rpx;
  padding: 20rpx;
  background: var(--background-color);
  border-radius: 12rpx;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.meta-icon {
  font-size: 24rpx;
}

.meta-label {
  font-size: 20rpx;
  color: var(--text-muted);
}

.meta-value {
  font-size: 22rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.solution-advantages {
  margin-bottom: 25rpx;
}

.advantages-title {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 15rpx;
  display: block;
}

.advantages-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.advantage-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 12rpx;
  background: rgba(10, 36, 99, 0.1);
  border-radius: 16rpx;
}

.advantage-icon {
  font-size: 20rpx;
  color: var(--success-color);
}

.advantage-text {
  font-size: 20rpx;
  color: var(--text-primary);
}

.solution-actions {
  display: flex;
  gap: 20rpx;
}

.solution-actions .btn {
  flex: 1;
  padding: 20rpx;
  font-size: 24rpx;
}

/* 对比弹窗 */
.comparison-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--card-color);
  border-radius: 20rpx;
  margin: 40rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid var(--border-color);
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.modal-close {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: var(--background-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: var(--text-secondary);
}

.comparison-table {
  padding: 30rpx;
}

.comparison-row {
  display: flex;
  border-bottom: 1rpx solid var(--border-color);
  padding: 20rpx 0;
}

.comparison-row.header {
  background: var(--background-color);
  font-weight: 600;
  border-radius: 8rpx 8rpx 0 0;
  margin: -30rpx -30rpx 0;
  padding: 20rpx 30rpx;
}

.comparison-cell {
  flex: 1;
  font-size: 24rpx;
  color: var(--text-primary);
  text-align: center;
}

.comparison-row.header .comparison-cell {
  color: var(--text-primary);
  font-weight: 600;
}

.comparison-row .comparison-cell:first-child {
  text-align: left;
  font-weight: 500;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-color);
  padding: 20rpx 30rpx;
  border-top: 1rpx solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 20rpx;
  z-index: 100;
}

.selected-info {
  flex: 1;
}

.selected-text {
  font-size: 24rpx;
  color: var(--text-primary);
  display: block;
  margin-bottom: 5rpx;
}

.selected-cost {
  font-size: 22rpx;
  color: var(--accent-color);
  font-weight: 600;
}

.bottom-actions .btn {
  padding: 25rpx 40rpx;
  font-size: 26rpx;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .solution-meta {
    flex-direction: column;
    gap: 15rpx;
  }
  
  .meta-item {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .solution-actions {
    flex-direction: column;
  }
  
  .comparison-row {
    flex-direction: column;
    gap: 10rpx;
  }
  
  .comparison-cell {
    text-align: left;
  }
}
</style>
